Webpack, Rollup, Parcel์ ๊ธฐ๋ฅ, ์ฑ๋ฅ, ๊ตฌ์ฑ ๋ฐ ์ฌ์ฉ ์ฌ๋ก๋ฅผ ํ๊ฐํ์ฌ ํ๋ก์ ํธ์ ์ ํฉํ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฒ๋ค๋ฌ๋ฅผ ์ ํํ ์ ์๋๋ก ๋๋ ์ข ํฉ์ ์ธ ๋น๊ต ๋ถ์์ ๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ ๋ฒ๋ค๋ฌ ๋น๊ต: Webpack vs Rollup vs Parcel
ํ๋ ์น ๊ฐ๋ฐ์์ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฒ๋ค๋ฌ๋ ๋ณต์กํ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ต์ ํํ๊ณ ๋ฐฐํฌํ๋ ๋ฐ ํ์์ ์ธ ๋๊ตฌ์ ๋๋ค. ๋ฒ๋ค๋ฌ๋ ์๋ง์ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ๊ณผ ๊ทธ ์์กด์ฑ(CSS, ์ด๋ฏธ์ง ๋ฑ)์ ๊ฐ์ ธ์ ๋ธ๋ผ์ฐ์ ์ ํจ์จ์ ์ผ๋ก ์ ๋ฌํ๊ธฐ ์ํด ๋ ์ ์ ์์ ํ์ผ, ์ข ์ข ๋จ ํ๋์ ํ์ผ๋ก ๋ฌถ์ด์ค๋๋ค. ์ด ๊ณผ์ ์ ๋ก๋ฉ ์๊ฐ์ ๊ฐ์ ํ๊ณ , HTTP ์์ฒญ์ ์ค์ด๋ฉฐ, ์ฝ๋๋ฅผ ๋ ๊ด๋ฆฌํ๊ธฐ ์ฝ๊ฒ ๋ง๋ญ๋๋ค. ๊ฐ์ฅ ์ธ๊ธฐ ์๋ ์ธ ๊ฐ์ง ๋ฒ๋ค๋ฌ๋ Webpack, Rollup, Parcel์ ๋๋ค. ๊ฐ๊ฐ์ ๊ฐ์ ๊ณผ ์ฝ์ ์ด ์์ด ๋ค์ํ ํ๋ก์ ํธ ์ ํ์ ์ ํฉํฉ๋๋ค. ์ด ์ข ํฉ ๊ฐ์ด๋๋ ์ด๋ค ๋ฒ๋ค๋ฌ๋ฅผ ๋น๊ตํ์ฌ ์ฌ๋ฌ๋ถ์ ํ์์ ๋ง๋ ๊ฒ์ ์ ํํ๋ ๋ฐ ๋์์ ์ค ๊ฒ์ ๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ ๋ฒ๋ค๋ฌ ์ดํดํ๊ธฐ
๋น๊ต์ ์์, ์๋ฐ์คํฌ๋ฆฝํธ ๋ฒ๋ค๋ฌ๊ฐ ๋ฌด์์ ํ๊ณ ์ ์ค์ํ์ง ์ ์ํด ๋ณด๊ฒ ์ต๋๋ค:
- ์์กด์ฑ ํด๊ฒฐ: ๋ฒ๋ค๋ฌ๋ ์ฝ๋๋ฅผ ๋ถ์ํ๊ณ ์ ํ๋ฆฌ์ผ์ด์ ์ด ์๋ํ๋ ๋ฐ ํ์ํ ๋ชจ๋ ์์กด์ฑ(๋ชจ๋, ๋ผ์ด๋ธ๋ฌ๋ฆฌ, ์์ฐ)์ ์๋ณํฉ๋๋ค.
- ๋ชจ๋ ๊ฒฐํฉ: ์ด๋ฌํ ์์กด์ฑ๋ค์ ํ๋ ๋๋ ๋ช ๊ฐ์ ๋ฒ๋ค ํ์ผ๋ก ๊ฒฐํฉํฉ๋๋ค.
- ์ฝ๋ ๋ณํ: ๋ฒ๋ค๋ฌ๋ Babel(ES6+ ํธํ์ฑ)์ด๋ PostCSS(CSS ๋ณํ)์ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ฝ๋๋ฅผ ๋ณํํ ์ ์์ต๋๋ค.
- ์ต์ ํ: ์ฝ๋๋ฅผ ์ถ์(๊ณต๋ฐฑ ๋ฐ ์ฃผ์ ์ ๊ฑฐ)ํ๊ณ , ๋๋ ํ(๋ณ์ ์ด๋ฆ ๋จ์ถ)ํ๋ฉฐ, ํธ๋ฆฌ ์์ดํน(์ฌ์ฉํ์ง ์๋ ์ฝ๋ ์ ๊ฑฐ)์ ์ํํ์ฌ ์ฝ๋๋ฅผ ์ต์ ํํฉ๋๋ค.
- ์ฝ๋ ์คํ๋ฆฌํ : ์ฝ๋๋ฅผ ํ์์ ๋ฐ๋ผ ๋ก๋๋๋ ์์ ์ฒญํฌ๋ก ๋ถํ ํ์ฌ ์ด๊ธฐ ๋ก๋ฉ ์๊ฐ์ ๊ฐ์ ํ ์ ์์ต๋๋ค.
๋ฒ๋ค๋ฌ๊ฐ ์๋ค๋ฉด ๊ฐ๋ฐ์๋ ์์กด์ฑ์ ์๋์ผ๋ก ๊ด๋ฆฌํ๊ณ ํ์ผ์ ์ฐ๊ฒฐํด์ผ ํ๋๋ฐ, ์ด๋ ์๊ฐ์ด ๋ง์ด ๊ฑธ๋ฆฌ๊ณ ์ค๋ฅ๊ฐ ๋ฐ์ํ๊ธฐ ์ฝ์ต๋๋ค. ๋ฒ๋ค๋ฌ๋ ์ด ๊ณผ์ ์ ์๋ํํ์ฌ ๊ฐ๋ฐ์ ๋ ํจ์จ์ ์ผ๋ก ๋ง๋ค๊ณ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ์ ํฅ์์ํต๋๋ค.
Webpack ์๊ฐ
Webpack์ ์๋ง๋ ๊ฐ์ฅ ์ธ๊ธฐ ์๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฒ๋ค๋ฌ์ผ ๊ฒ์ ๋๋ค. ๊ตฌ์ฑ ๊ฐ๋ฅ์ฑ์ด ๋งค์ฐ ๋๊ณ ๊ด๋ฒ์ํ ๊ธฐ๋ฅ์ ์ง์ํ์ฌ ๋ณต์กํ ํ๋ก์ ํธ๋ฅผ ์ํ ๊ฐ๋ ฅํ ๋๊ตฌ์ ๋๋ค. ํ์ง๋ง ์ด๋ฌํ ๊ฐ๋ ฅํจ์ ๋ ๊ฐํ๋ฅธ ํ์ต ๊ณก์ ์ ๋๋ฐํฉ๋๋ค.
Webpack์ ์ฃผ์ ํน์ง
- ๋์ ๊ตฌ์ฑ ๊ฐ๋ฅ์ฑ: Webpack์ ๊ตฌ์ฑ์ ๊ตฌ์ฑ ํ์ผ(
webpack.config.js)์ ๊ธฐ๋ฐ์ผ๋ก ํ๋ฉฐ, ์ด๋ฅผ ํตํด ๋ฒ๋ค๋ง ํ๋ก์ธ์ค์ ๊ฑฐ์ ๋ชจ๋ ์ธก๋ฉด์ ์ฌ์ฉ์ ์ ์ํ ์ ์์ต๋๋ค. - ๋ก๋(Loaders): ๋ก๋๋ ๋ค์ํ ์ ํ์ ํ์ผ(CSS, ์ด๋ฏธ์ง, ํฐํธ ๋ฑ)์ ๋ฒ๋ค์ ํฌํจ๋ ์ ์๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ชจ๋๋ก ๋ณํํฉ๋๋ค. ์๋ฅผ ๋ค์ด,
babel-loader๋ ES6+ ์ฝ๋๋ฅผ ๋ธ๋ผ์ฐ์ ํธํ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ณํํฉ๋๋ค. - ํ๋ฌ๊ทธ์ธ(Plugins): ํ๋ฌ๊ทธ์ธ์ ์ฝ๋ ์ถ์, ์ต์ ํ, HTML ํ์ผ ์์ฑ๊ณผ ๊ฐ์ ์์
์ ์ํํ์ฌ Webpack์ ๊ธฐ๋ฅ์ ํ์ฅํฉ๋๋ค. ์๋ก๋
HtmlWebpackPlugin,MiniCssExtractPlugin,TerserPlugin์ด ์์ต๋๋ค. - ์ฝ๋ ์คํ๋ฆฌํ : Webpack์ ์ฝ๋ ์คํ๋ฆฌํ ์ ๋ฐ์ด๋๋ฉฐ, ์ ํ๋ฆฌ์ผ์ด์ ์ ํ์์ ๋ฐ๋ผ ๋ก๋๋๋ ์์ ์ฒญํฌ๋ก ๋๋ ์ ์์ต๋๋ค. ์ด๋ ํนํ ๋๊ท๋ชจ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ด๊ธฐ ๋ก๋ฉ ์๊ฐ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค.
- ๊ฐ๋ฐ ์๋ฒ(Dev Server): Webpack์ ํซ ๋ชจ๋ ๊ต์ฒด(HMR)์ ๊ฐ์ ๊ธฐ๋ฅ์ ๊ฐ์ถ ๊ฐ๋ฐ ์๋ฒ๋ฅผ ์ ๊ณตํ์ฌ ์ ์ฒด ํ์ด์ง๋ฅผ ์๋ก ๊ณ ์น์ง ์๊ณ ์ฝ๋๋ฅผ ์ ๋ฐ์ดํธํ ์ ์์ต๋๋ค.
Webpack ๊ตฌ์ฑ ์์
๋ค์์ ๊ธฐ๋ณธ์ ์ธ webpack.config.js ํ์ผ์ ์์ ์
๋๋ค:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
],
devServer: {
static: {
directory: path.join(__dirname, 'dist'),
},
compress: true,
port: 9000,
},
};
์ด ๊ตฌ์ฑ์ ์ง์
์ (./src/index.js), ์ถ๋ ฅ ํ์ผ(bundle.js), ์๋ฐ์คํฌ๋ฆฝํธ(Babel) ๋ฐ CSS์ฉ ๋ก๋, HTML ํ์ผ์ ์์ฑํ๋ ํ๋ฌ๊ทธ์ธ(HtmlWebpackPlugin), ๊ทธ๋ฆฌ๊ณ ๊ฐ๋ฐ ์๋ฒ ๊ตฌ์ฑ์ ์ง์ ํฉ๋๋ค.
Webpack ์ฌ์ฉ ์๊ธฐ
- ๋ณต์กํ ์ ํ๋ฆฌ์ผ์ด์ : Webpack์ ์์กด์ฑ๊ณผ ์์ฐ์ด ๋ง์ ๋๊ท๋ชจ ๋ฐ ๋ณต์กํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋งค์ฐ ์ ํฉํฉ๋๋ค.
- ์ฝ๋ ์คํ๋ฆฌํ ์๊ตฌ์ฌํญ: ์ฝ๋ ์คํ๋ฆฌํ ์ ๋ํ ์ธ๋ฐํ ์ ์ด๊ฐ ํ์ํ ๊ฒฝ์ฐ, Webpack์ ํ์ํ ๋๊ตฌ๋ฅผ ์ ๊ณตํฉ๋๋ค.
- ์ฌ์ฉ์ ์ ์ ํ์์ฑ: ๋ฒ๋ค๋ง ํ๋ก์ธ์ค์ ๋ํ ๋์ ์์ค์ ์ฌ์ฉ์ ์ ์ ๋ฐ ์ ์ด๊ฐ ํ์ํ ๊ฒฝ์ฐ, Webpack์ ๊ด๋ฒ์ํ ๊ตฌ์ฑ ์ต์ ์ ํฐ ์ฅ์ ์ ๋๋ค.
- ๋๊ท๋ชจ ํ ํ์ : ํ์คํ๋ ๊ตฌ์ฑ๊ณผ ์ฑ์ํ ์ํ๊ณ๋ ์ฌ๋ฌ ๊ฐ๋ฐ์๊ฐ ํ์ ํด์ผ ํ๋ ํ๋ก์ ํธ์ Webpack์ ์ ํฉํ๊ฒ ๋ง๋ญ๋๋ค.
Rollup ์๊ฐ
Rollup์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํ๋ ์์ํฌ๋ฅผ ์ํ ๊ณ ๋๋ก ์ต์ ํ๋ ๋ฒ๋ค์ ๋ง๋๋ ๋ฐ ์ค์ ์ ๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฒ๋ค๋ฌ์ ๋๋ค. ์ต์ข ๋ฒ๋ค์์ ์ฌ์ฉํ์ง ์๋ ์ฝ๋๋ฅผ ์ ๊ฑฐํ๋ ๊ณผ์ ์ธ ํธ๋ฆฌ ์์ดํน์ ๋ฐ์ด๋ฉ๋๋ค.
Rollup์ ์ฃผ์ ํน์ง
- ํธ๋ฆฌ ์์ดํน: Rollup์ ์ฃผ์ ๊ฐ์ ์ ๊ณต๊ฒฉ์ ์ธ ํธ๋ฆฌ ์์ดํน์ ์ํํ๋ ๋ฅ๋ ฅ์ ๋๋ค. ์ฝ๋๋ฅผ ์ ์ ์ผ๋ก ๋ถ์ํ์ฌ ์ฌ์ฉ๋์ง ์๋ ํจ์, ๋ณ์ ๋๋ ๋ชจ๋์ ์๋ณํ๊ณ ์ ๊ฑฐํฉ๋๋ค. ์ด๋ ๋ ์๊ณ ํจ์จ์ ์ธ ๋ฒ๋ค์ ๋ง๋ญ๋๋ค.
- ESM ์ง์: Rollup์ ES ๋ชจ๋(
import๋ฐexport๊ตฌ๋ฌธ)๊ณผ ๊ธฐ๋ณธ์ ์ผ๋ก ์๋ํ๋๋ก ์ค๊ณ๋์์ต๋๋ค. - ํ๋ฌ๊ทธ์ธ ์์คํ : Rollup์ ์ฝ๋ ๋ณํ(Babel), ์ถ์(Terser), CSS ์ฒ๋ฆฌ์ ๊ฐ์ ์์ ์ผ๋ก ๊ธฐ๋ฅ์ ํ์ฅํ ์ ์๋ ํ๋ฌ๊ทธ์ธ ์์คํ ์ ๊ฐ์ถ๊ณ ์์ต๋๋ค.
- ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค์ฌ: Rollup์ ๋ค๋ฅธ ํ๋ก์ ํธ์ ์ฝ๊ฒ ํตํฉํ ์ ์๋ ๊นจ๋ํ๊ณ ์ต์ ํ๋ ๋ฒ๋ค์ ์์ฑํ๊ธฐ ๋๋ฌธ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํ๋ ์์ํฌ๋ฅผ ๋น๋ํ๋ ๋ฐ ํนํ ์ ํฉํฉ๋๋ค.
- ๋ค์ค ์ถ๋ ฅ ํ์: Rollup์ CommonJS(Node.js์ฉ), ES ๋ชจ๋(๋ธ๋ผ์ฐ์ ์ฉ), UMD(๋ฒ์ฉ ํธํ์ฉ) ๋ฑ ๋ค์ํ ํ์์ผ๋ก ๋ฒ๋ค์ ์์ฑํ ์ ์์ต๋๋ค.
Rollup ๊ตฌ์ฑ ์์
๋ค์์ ๊ธฐ๋ณธ์ ์ธ rollup.config.js ํ์ผ์ ์์ ์
๋๋ค:
import babel from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';
export default {
input: 'src/index.js',
output: [
{
file: 'dist/bundle.cjs.js',
format: 'cjs',
},
{
file: 'dist/bundle.esm.js',
format: 'es',
},
],
plugins: [
babel({
exclude: 'node_modules/**', // only transpile our source code
}),
terser(), // minify
],
};
์ด ๊ตฌ์ฑ์ ์
๋ ฅ ํ์ผ(src/index.js), ์ถ๋ ฅ ํ์(CommonJS ๋ฐ ES ๋ชจ๋), ๊ทธ๋ฆฌ๊ณ Babel ๋ฐ Terser์ฉ ํ๋ฌ๊ทธ์ธ์ ์ง์ ํฉ๋๋ค.
Rollup ์ฌ์ฉ ์๊ธฐ
- ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ฐ ํ๋ ์์ํฌ: Rollup์ ๊ฐ๋ฅํ ํ ์๊ณ ํจ์จ์ ์ด์ด์ผ ํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ฐ ํ๋ ์์ํฌ๋ฅผ ๋น๋ํ๋ ๋ฐ ์ด์์ ์ ๋๋ค.
- ํธ๋ฆฌ ์์ดํน์ ์ค์์ฑ: ํ๋ก์ ํธ์ ํธ๋ฆฌ ์์ดํน์ด ์ค์ํ ์๊ตฌ์ฌํญ์ธ ๊ฒฝ์ฐ, Rollup์ ๊ธฐ๋ฅ์ ํฐ ์ฅ์ ์ ๋๋ค.
- ESM ๊ธฐ๋ฐ ํ๋ก์ ํธ: Rollup์ ES ๋ชจ๋์ ๋ํ ๊ธฐ๋ณธ ์ง์์ ์ด ๋ชจ๋ ํ์์ ์ฌ์ฉํ๋ ํ๋ก์ ํธ์ ์ข์ ์ ํ์ ๋๋ค.
- ๋ ์์ ๋ฒ๋ค ํฌ๊ธฐ: ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ฒ๋ค ํฌ๊ธฐ๋ฅผ ์ค์ด๋ ๊ฒ์ ์ฐ์ ์ํ๋ค๋ฉด, Rollup์ ๋ค๋ฅธ ๋ฒ๋ค๋ฌ์ ๋นํด ์ฑ๋ฅ์์ ์ด์ ์ ์ ๊ณตํ ์ ์์ต๋๋ค.
Parcel ์๊ฐ
Parcel์ ์ํํ๊ณ ์ฌ์ฉํ๊ธฐ ์ฌ์ด ๊ฐ๋ฐ ๊ฒฝํ์ ์ ๊ณตํ๋ ๊ฒ์ ๋ชฉํ๋ก ํ๋ ์ ๋ก ๊ตฌ์ฑ(zero-configuration) ๋ฒ๋ค๋ฌ์ ๋๋ค. ๋ณต์กํ ๊ตฌ์ฑ ํ์ผ ์์ด๋ ์์กด์ฑ์ ์๋์ผ๋ก ๊ฐ์งํ๊ณ ์ฝ๋ ๋ณํ์ ์ฒ๋ฆฌํฉ๋๋ค.
Parcel์ ์ฃผ์ ํน์ง
- ์ ๋ก ๊ตฌ์ฑ: Parcel์ ์ต์ํ์ ๊ตฌ์ฑ๋ง ํ์ํฉ๋๋ค. ํ์ผ ํ์ฅ์๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์์กด์ฑ์ ์๋์ผ๋ก ๊ฐ์งํ๊ณ ์ฝ๋๋ฅผ ๋ณํํฉ๋๋ค.
- ๋น ๋ฅธ ๋น๋ ์๊ฐ: Parcel์ ๋ฉํฐ ์ฝ์ด ์ฒ๋ฆฌ์ ์บ์ฑ ์์คํ ์ ์ฌ์ฉํ์ฌ ๋น ๋ฅธ ๋น๋ ์๊ฐ์ผ๋ก ์ ๋ช ํฉ๋๋ค.
- ์๋ ๋ณํ: Parcel์ ๋ช ์์ ์ธ ๊ตฌ์ฑ ์์ด๋ Babel, PostCSS ๋ฐ ๊ธฐํ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ฝ๋๋ฅผ ์๋์ผ๋ก ๋ณํํฉ๋๋ค.
- ํซ ๋ชจ๋ ๊ต์ฒด(HMR): Parcel์ ํซ ๋ชจ๋ ๊ต์ฒด๋ฅผ ๋ด์ฅ ์ง์ํ์ฌ ์ ์ฒด ํ์ด์ง๋ฅผ ์๋ก ๊ณ ์น์ง ์๊ณ ์ฝ๋๋ฅผ ์ ๋ฐ์ดํธํ ์ ์์ต๋๋ค.
- ์์ฐ ์ฒ๋ฆฌ: Parcel์ ์ด๋ฏธ์ง, CSS, ํฐํธ์ ๊ฐ์ ์์ฐ์ ์๋์ผ๋ก ์ฒ๋ฆฌํฉ๋๋ค.
Parcel ์ฌ์ฉ ์์
Parcel์ ์ฌ์ฉํ๋ ค๋ฉด ๋ค์ ๋ช ๋ น์ ์คํํ๊ธฐ๋ง ํ๋ฉด ๋ฉ๋๋ค:
parcel src/index.html
Parcel์ ์๋์ผ๋ก ํ๋ก์ ํธ๋ฅผ ๋น๋ํ๊ณ ๊ฐ๋ฐ ์๋ฒ์์ ์ ๊ณตํฉ๋๋ค. ๋น๋ ํ๋ก์ธ์ค๋ฅผ ์ฌ์ฉ์ ์ ์ํด์ผ ํ๋ ๊ฒฝ์ฐ๊ฐ ์๋๋ฉด ๊ตฌ์ฑ ํ์ผ์ ๋ง๋ค ํ์๊ฐ ์์ต๋๋ค.
Parcel ์ฌ์ฉ ์๊ธฐ
- ์๊ท๋ชจ์์ ์ค๊ท๋ชจ ํ๋ก์ ํธ: Parcel์ ๊ฐ๋จํ๊ณ ์ฌ์ฉํ๊ธฐ ์ฌ์ด ๋ฒ๋ค๋ฌ๋ฅผ ์ํ๋ ์๊ท๋ชจ์์ ์ค๊ท๋ชจ ํ๋ก์ ํธ์ ๋งค์ฐ ์ ํฉํฉ๋๋ค.
- ๋น ๋ฅธ ํ๋กํ ํ์ดํ: ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ์ํ๊ฒ ํ๋กํ ํ์ดํํด์ผ ํ๋ ๊ฒฝ์ฐ, Parcel์ ์ ๋ก ๊ตฌ์ฑ ์ ๊ทผ ๋ฐฉ์์ ๋ง์ ์๊ฐ์ ์ ์ฝํ ์ ์์ต๋๋ค.
- ์ต์ ๊ตฌ์ฑ ์ ํธ: ๋ณต์กํ ๊ตฌ์ฑ ํ์ผ์ ํผํ๊ณ ์ถ๋ค๋ฉด Parcel์ ํ๋ฅญํ ์ ํ์ ๋๋ค.
- ์ด๋ณด์ ์นํ์ ์ธ ํ๋ก์ ํธ: Parcel์ Webpack์ด๋ Rollup์ ๋นํด ๋ฐฐ์ฐ๊ธฐ ์ฌ์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ์ต์ํ์ง ์์ ๊ฐ๋ฐ์์๊ฒ ์ด์์ ์ ๋๋ค.
Webpack vs Rollup vs Parcel: ์์ธ ๋น๊ต
์ด์ Webpack, Rollup, Parcel์ ๋ค์ํ ์ธก๋ฉด์์ ๋น๊ตํด ๋ณด๊ฒ ์ต๋๋ค:
๊ตฌ์ฑ
- Webpack: ๊ตฌ์ฑ ๊ฐ๋ฅ์ฑ์ด ๋งค์ฐ ๋์ผ๋ฉฐ,
webpack.config.jsํ์ผ์ด ํ์ํฉ๋๋ค. - Rollup: ๊ตฌ์ฑ ๊ฐ๋ฅํ๋ฉฐ,
rollup.config.jsํ์ผ์ด ํ์ํ์ง๋ง ์ผ๋ฐ์ ์ผ๋ก Webpack ๊ตฌ์ฑ๋ณด๋ค ๊ฐ๋จํฉ๋๋ค. - Parcel: ๊ธฐ๋ณธ์ ์ผ๋ก ์ ๋ก ๊ตฌ์ฑ์ด์ง๋ง,
.parcelrcํ์ผ๋ก ์ฌ์ฉ์ ์ ์ํ ์ ์์ต๋๋ค.
์ฑ๋ฅ
- Webpack: ์ด๊ธฐ ๋น๋๋ ๋ ๋๋ฆด ์ ์์ง๋ง ์ฆ๋ถ ๋น๋์ ์ต์ ํ๋์ด ์์ต๋๋ค.
- Rollup: ํธ๋ฆฌ ์์ดํน ๊ธฐ๋ฅ ๋๋ถ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋น๋์ ์ผ๋ฐ์ ์ผ๋ก ๋ ๋น ๋ฆ ๋๋ค.
- Parcel: ํนํ ์ด๊ธฐ ๋น๋์์ ๋น ๋ฅธ ๋น๋ ์๊ฐ์ผ๋ก ์๋ ค์ ธ ์์ต๋๋ค.
ํธ๋ฆฌ ์์ดํน
- Webpack: ํธ๋ฆฌ ์์ดํน์ ์ง์ํ์ง๋ง ์ ์คํ ๊ตฌ์ฑ์ด ํ์ํฉ๋๋ค.
- Rollup: ๋ฐ์ด๋ ํธ๋ฆฌ ์์ดํน ๊ธฐ๋ฅ์ ๊ฐ์ถ๊ณ ์์ต๋๋ค.
- Parcel: ํธ๋ฆฌ ์์ดํน์ ์๋์ผ๋ก ์ง์ํฉ๋๋ค.
์ฝ๋ ์คํ๋ฆฌํ
- Webpack: ์ธ๋ฐํ ์ ์ด๊ฐ ๊ฐ๋ฅํ ๊ฐ๋ ฅํ ์ฝ๋ ์คํ๋ฆฌํ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค.
- Rollup: ์ฝ๋ ์คํ๋ฆฌํ ์ ์ง์ํ์ง๋ง Webpack๋งํผ ๊ณ ๊ธ ๊ธฐ๋ฅ์ ์๋๋๋ค.
- Parcel: ์ฝ๋ ์คํ๋ฆฌํ ์ ์๋์ผ๋ก ์ง์ํฉ๋๋ค.
์ํ๊ณ
- Webpack: ์๋ง์ ๋ก๋์ ํ๋ฌ๊ทธ์ธ์ด ์๋ ํฌ๊ณ ์ฑ์ํ ์ํ๊ณ๋ฅผ ๊ฐ์ง๊ณ ์์ต๋๋ค.
- Rollup: ์ฑ์ฅํ๋ ์ํ๊ณ๋ฅผ ๊ฐ์ง๊ณ ์์ง๋ง Webpack๋ณด๋ค๋ ์์ต๋๋ค.
- Parcel: Webpack๊ณผ Rollup์ ๋นํด ์ํ๊ณ๊ฐ ์์ง๋ง ๋น ๋ฅด๊ฒ ์ฑ์ฅํ๊ณ ์์ต๋๋ค.
์ฌ์ฉ ์ฌ๋ก
- Webpack: ๋ณต์กํ ์ ํ๋ฆฌ์ผ์ด์ , ๋จ์ผ ํ์ด์ง ์ ํ๋ฆฌ์ผ์ด์ (SPA), ๋๊ท๋ชจ ํ๋ก์ ํธ.
- Rollup: ๋ผ์ด๋ธ๋ฌ๋ฆฌ, ํ๋ ์์ํฌ, ํธ๋ฆฌ ์์ดํน์ด ์ค์ํ ์๊ท๋ชจ์์ ์ค๊ท๋ชจ ํ๋ก์ ํธ.
- Parcel: ์๊ท๋ชจ์์ ์ค๊ท๋ชจ ํ๋ก์ ํธ, ๋น ๋ฅธ ํ๋กํ ํ์ดํ, ์ด๋ณด์ ์นํ์ ์ธ ํ๋ก์ ํธ.
์ปค๋ฎค๋ํฐ ๋ฐ ์ง์
- Webpack: ํฌ๊ณ ํ๋ฐํ ์ปค๋ฎค๋ํฐ๋ฅผ ๋ณด์ ํ๊ณ ์์ผ๋ฉฐ, ๊ด๋ฒ์ํ ๋ฌธ์์ ์๋ฃ๋ฅผ ์ด์ฉํ ์ ์์ต๋๋ค.
- Rollup: ์ฑ์ฅํ๋ ์ปค๋ฎค๋ํฐ๋ฅผ ๋ณด์ ํ๊ณ ์์ผ๋ฉฐ, ์ข์ ๋ฌธ์์ ์ง์์ ์ ๊ณตํฉ๋๋ค.
- Parcel: ์์ง๋ง ํ๋ฐํ ์ปค๋ฎค๋ํฐ๋ฅผ ๋ณด์ ํ๊ณ ์์ผ๋ฉฐ, ์ข์ ๋ฌธ์์ ์ง์์ ์ ๊ณตํฉ๋๋ค.
๊ฐ๋ฐ ๊ฒฝํ
- Webpack: ๊ฐ๋ ฅํ ๊ธฐ๋ฅ๊ณผ ์ฌ์ฉ์ ์ ์๋ฅผ ์ ๊ณตํ์ง๋ง ๊ตฌ์ฑํ๊ณ ๋ฐฐ์ฐ๊ธฐ๊ฐ ๋ณต์กํ ์ ์์ต๋๋ค.
- Rollup: ์ ์ฐ์ฑ๊ณผ ๋จ์์ฑ ์ฌ์ด์ ๊ท ํ์ ์ด๋ฃน๋๋ค. ๊ตฌ์ฑ์ด ์ผ๋ฐ์ ์ผ๋ก Webpack๋ณด๋ค ๋ ์ฅํฉํฉ๋๋ค.
- Parcel: ์ ๋ก ๊ตฌ์ฑ ์ ๊ทผ ๋ฐฉ์์ผ๋ก ๋งค์ฐ ์ํํ๊ณ ๊ฐ๋ฐ์ ์นํ์ ์ธ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค.
์ฌ๋ฐ๋ฅธ ๋ฒ๋ค๋ฌ ์ ํํ๊ธฐ
๋ฒ๋ค๋ฌ์ ์ ํ์ ํ๋ก์ ํธ์ ํน์ ์๊ตฌ์ฌํญ์ ๋ฐ๋ผ ๋ฌ๋ผ์ง๋๋ค. ๊ฒฐ์ ์ ๋๊ธฐ ์ํ ์์ฝ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- Webpack์ ์ ํํ์ธ์ ๋ง์ฝ: ์์กด์ฑ๊ณผ ์์ฐ์ด ๋ง์ ๋ณต์กํ ์ ํ๋ฆฌ์ผ์ด์ ์ ์์ ์ค์ด๊ณ , ๋ฒ๋ค๋ง ํ๋ก์ธ์ค์ ๋ํ ์ธ๋ฐํ ์ ์ด๊ฐ ํ์ํ ๊ฒฝ์ฐ. ๋ํ ํฌ๊ณ ์ฑ์ํ ์ํ๊ณ๋ฅผ ํ์ฉํ๊ณ ์ถ์ ๋.
- Rollup์ ์ ํํ์ธ์ ๋ง์ฝ: ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ํ๋ ์์ํฌ๋ฅผ ๋น๋ํ๊ณ ์์ผ๋ฉฐ ๋ฒ๋ค ํฌ๊ธฐ๋ฅผ ์ต์ํํด์ผ ํ๋ ๊ฒฝ์ฐ. ๋ฐ์ด๋ ํธ๋ฆฌ ์์ดํน ๊ธฐ๋ฅ๊ณผ ES ๋ชจ๋์ ๋ํ ๊ธฐ๋ณธ ์ง์์ ์ํ ๋.
- Parcel์ ์ ํํ์ธ์ ๋ง์ฝ: ์๊ท๋ชจ์์ ์ค๊ท๋ชจ ํ๋ก์ ํธ๋ฅผ ์์ ์ค์ด๊ณ ์ ๋ก ๊ตฌ์ฑ์ผ๋ก ๊ฐ๋จํ๊ณ ์ฌ์ฉํ๊ธฐ ์ฌ์ด ๋ฒ๋ค๋ฌ๋ฅผ ์ํ๋ ๊ฒฝ์ฐ. ๋น ๋ฅธ ๋น๋ ์๊ฐ๊ณผ ์ํํ ๊ฐ๋ฐ ๊ฒฝํ์ ์ฐ์ ์ํ ๋.
์ค์ ์ฌ์ฉ ์์ ๋ฐ ์ฌ๋ก ์ฐ๊ตฌ
์ด๋ฌํ ๋ฒ๋ค๋ฌ๊ฐ ์ด๋ป๊ฒ ์ฌ์ฉ๋๋์ง ์ค์ ์์๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค:
- React (Facebook): React๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋น๋์ Rollup์ ์ฌ์ฉํ์ฌ ํธ๋ฆฌ ์์ดํน ๊ธฐ๋ฅ์ผ๋ก ๋ฒ๋ค ํฌ๊ธฐ๋ฅผ ์ต์ํํฉ๋๋ค.
- Vue CLI (Vue.js): Vue CLI๋ ๋ด๋ถ์ ์ผ๋ก Webpack์ ์ฌ์ฉํ์ฌ Vue.js ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํ ๊ฐ๋ ฅํ๊ณ ๊ตฌ์ฑ ๊ฐ๋ฅํ ๋น๋ ์์คํ ์ ์ ๊ณตํฉ๋๋ค.
- Create React App: Create React App (CRA)์ ๊ณผ๊ฑฐ์ Webpack์ ์ฌ์ฉํ์ฌ ๋ณต์กํ ๊ตฌ์ฑ์ ์ถ์ํํ์ต๋๋ค. ์ดํ ๋ค๋ฅธ ์๋ฃจ์ ์ผ๋ก ์ด์ ํ์ต๋๋ค.
- ๋ง์ ํ๋ ์น ์ ํ๋ฆฌ์ผ์ด์ : ๋ง์ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋ณต์กํ ์์กด์ฑ ๊ด๋ฆฌ์ ์ฝ๋ ์คํ๋ฆฌํ ์ ์ํด Webpack์ ์ฌ์ฉํฉ๋๋ค.
- ์๊ท๋ชจ ๊ฐ์ธ ํ๋ก์ ํธ: Parcel์ ์ฌ์ฉ์ด ๊ฐํธํ์ฌ ์๊ท๋ชจ์์ ์ค๊ท๋ชจ ๊ฐ์ธ ํ๋ก์ ํธ์ ์์ฃผ ์ฌ์ฉ๋ฉ๋๋ค.
ํ๊ณผ ๋ชจ๋ฒ ์ฌ๋ก
์๋ฐ์คํฌ๋ฆฝํธ ๋ฒ๋ค๋ฌ ์ฌ์ฉ์ ๋ํ ๋ช ๊ฐ์ง ํ๊ณผ ๋ชจ๋ฒ ์ฌ๋ก์ ๋๋ค:
- ๊ตฌ์ฑ ํ์ผ์ ๊นจ๋ํ๊ณ ์ฒด๊ณ์ ์ผ๋ก ์ ์งํ์ธ์: ์ฃผ์์ ์ฌ์ฉํ์ฌ ๊ตฌ์ฑ์ ๋ค๋ฅธ ๋ถ๋ถ์ ์ค๋ช ํ๊ณ , ๋ณต์กํ ๊ตฌ์ฑ์ ๋ ์๊ณ ๊ด๋ฆฌํ๊ธฐ ์ฌ์ด ์ฒญํฌ๋ก ๋๋์ธ์.
- ํธ๋ฆฌ ์์ดํน์ ์ํด ์ฝ๋๋ฅผ ์ต์ ํํ์ธ์: ES ๋ชจ๋(
import๋ฐexport๊ตฌ๋ฌธ)์ ์ฌ์ฉํ์ฌ ์ฝ๋๋ฅผ ๋ ์ฝ๊ฒ ํธ๋ฆฌ ์์ดํนํ ์ ์๋๋ก ๋ง๋์ธ์. ๋ชจ๋์์ ๋ถ์์ฉ(side effects)์ ํผํ์ธ์. - ์ฝ๋ ์คํ๋ฆฌํ ์ ์ฌ์ฉํ์ฌ ์ด๊ธฐ ๋ก๋ฉ ์๊ฐ์ ๊ฐ์ ํ์ธ์: ์ ํ๋ฆฌ์ผ์ด์ ์ ํ์์ ๋ฐ๋ผ ๋ก๋๋๋ ์์ ์ฒญํฌ๋ก ๋๋์ธ์.
- ์บ์ฑ์ ํ์ฉํ์ฌ ๋น๋ ์๋๋ฅผ ๋์ด์ธ์: ๋น๋ ์ํฐํฉํธ๋ฅผ ์บ์ํ๋๋ก ๋ฒ๋ค๋ฌ๋ฅผ ๊ตฌ์ฑํ์ฌ ๋น๋ ์๊ฐ์ ์ค์ด์ธ์.
- ๋ฒ๋ค๋ฌ์ ํ๋ฌ๊ทธ์ธ์ ์ต์ ๋ฒ์ ์ ์ ์งํ์ธ์: ์ด๋ฅผ ํตํด ์ต์ ๊ธฐ๋ฅ๊ณผ ๋ฒ๊ทธ ์์ ์ ํ์ฉํ ์ ์์ต๋๋ค.
- ๋น๋๋ฅผ ํ๋กํ์ผ๋งํ์ธ์: ํ๋กํ์ผ๋ง ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋น๋ ํ๋ก์ธ์ค์ ๋ณ๋ชฉ ํ์์ ์๋ณํ์ธ์. ์ด๋ ๊ตฌ์ฑ์ ์ต์ ํํ๊ณ ๋น๋ ์๊ฐ์ ๊ฐ์ ํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค. Webpack์๋ ์ด๋ฅผ ์ํ ํ๋ฌ๊ทธ์ธ์ด ์์ต๋๋ค.
๊ฒฐ๋ก
Webpack, Rollup, Parcel์ ๋ชจ๋ ๊ฐ๋ ฅํ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฒ๋ค๋ฌ์ด๋ฉฐ, ๊ฐ๊ฐ ๊ณ ์ ํ ๊ฐ์ ๊ณผ ์ฝ์ ์ ๊ฐ์ง๊ณ ์์ต๋๋ค. Webpack์ ๊ตฌ์ฑ ๊ฐ๋ฅ์ฑ์ด ๋งค์ฐ ๋๊ณ ๋ณต์กํ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ํฉํฉ๋๋ค. Rollup์ ํธ๋ฆฌ ์์ดํน์ ๋ฐ์ด๋๋ฉฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํ๋ ์์ํฌ๋ฅผ ๋น๋ํ๋ ๋ฐ ์ด์์ ์ ๋๋ค. Parcel์ ์ ๋ก ๊ตฌ์ฑ ์ ๊ทผ ๋ฐฉ์์ ์ ๊ณตํ๋ฉฐ ์๊ท๋ชจ์์ ์ค๊ท๋ชจ ํ๋ก์ ํธ์ ๋น ๋ฅธ ํ๋กํ ํ์ดํ์ ์๋ฒฝํฉ๋๋ค. ๊ฐ ๋ฒ๋ค๋ฌ์ ๊ธฐ๋ฅ, ์ฑ๋ฅ ํน์ฑ, ์ฌ์ฉ ์ฌ๋ก๋ฅผ ์ดํดํจ์ผ๋ก์จ ํ๋ก์ ํธ์ ์ ํฉํ ๋๊ตฌ๋ฅผ ์ ํํ๊ณ ์น ๊ฐ๋ฐ ์ํฌํ๋ก์ฐ๋ฅผ ์ต์ ํํ ์ ์์ต๋๋ค. ๊ฒฐ์ ์ ๋ด๋ฆด ๋ ํ๋ก์ ํธ์ ๋ณต์ก์ฑ, ๋ฒ๋ค ํฌ๊ธฐ์ ์ค์์ฑ, ์ํ๋ ๊ตฌ์ฑ ์์ค์ ๊ณ ๋ คํ์ธ์.
ํ๋์ ๋์๊ณผ ๋ฐ์ ์ ๋ํด์๋ ๊ณ ๋ คํ๋ ๊ฒ์ ์์ง ๋ง์ธ์. ์ด ๋น๊ต๋ ๋๋ฆฌ ์ฌ์ฉ๋๋ ์ด ์ธ ๊ฐ์ง ๋ฒ๋ค๋ฌ์ ์ด์ ์ ๋ง์ถ๊ณ ์์ง๋ง, ์๋ฐ์คํฌ๋ฆฝํธ ์ํ๊ณ๋ ๋์์์ด ์งํํ๊ณ ์์ต๋๋ค. ๋ค๋ฅธ ์ต์ ์ ํ์ํ๊ณ ๋ฏธ๋์ ์ฌ๋ฌ๋ถ์ ํน์ ์๊ตฌ์ ๋ ์ ๋ง์ ์ ์๋ ์๋ก์ด ๋๊ตฌ์ ์ด๋ฆฐ ๋ง์์ ๊ฐ์ง์ธ์.
์ฆ๊ฑฐ์ด ๋ฒ๋ค๋ง ๋์ธ์!